<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>TZ-追梦</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body{
            background: #83B76B;
            color: #fff;
        }
        #tab{
            width: 700px;
            height: 400px;
            margin: 50px auto;
        }
        #tab h3{
            font-size: 26px;
        }
        #tab .con{
            height: 300px;
            margin-top: 40px;
        }
        input{
            display: none;
        }
        #tab label{
            width: 120px;
            height: 45px;
            background: #6A9E52;
            display: inline-block;
            text-align: center;
            line-height: 45px;
            vertical-align: bottom;
        }
        #tab .con div{
            padding: 40px 20px;
            background: green;
            display: none;
        }
        #tab input:checked + label{
            background: green;
            height: 50px;
        }
        #tab input:nth-of-type(1):checked ~ div:nth-of-type(1){
             display: block;
        }
        #tab input:nth-of-type(2):checked ~ div:nth-of-type(2){
             display: block;
        }
    </style>
</head>
<body>
    <section id="tab">
        <h3>纯CSS制作的TAB选项卡</h3>
        <div class="con">
            <input type="radio" name="q" id="radio1" checked>
            <label for="radio1">海子的诗</label>
            <input type="radio" name="q" id="radio2">
            <label for="radio2">我的感悟</label>
            <div>面对大河我无限惭愧 我年华虚度 空有一身疲倦 和所有以梦为马的诗人一样 岁月易逝 一滴不剩 从明天起，做一个幸福的人 喂马、劈柴，周游世界 从明天起，关心粮食和蔬菜 我有一所房子，面朝大海，春暖花开 从明天起，和每一个亲人通信 告诉他们我的幸福 那幸福的闪电告诉我的 我将告诉每一个人 给每一条河每一座山取一个温暖的名字 陌生人，我也为你祝福 愿你有一个灿烂的前程 愿你有情人终成眷属 愿你在尘世获得幸福 我只愿面朝大海，春暖花开</div>
            <div>在将来的某一天，我希望有人能为这首诗谱上曲子，流传后世，在这个人心浮躁的社会，能够静下心来关心鼓励周围的人，体验生活是多么的美好，不要因为每天的忙碌，而没有留意路途的风景，从此时此刻起，珍惜每一分每一秒</div>
        </div>
    </section>
</body>
</html>